<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box-init {
            width: 400px;
            height: 200px;
            background-color: skyblue;
            box-sizing: border-box;
            transition: all .3s;
        }

        .box {
            border: 10px solid pink;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="box-init"></div>

    <script>
        // 求斐波那契数列第N项的值
        function series(n) {
            if (n < 0) {
                return '输入的数字不能小于0';
            } else if (n == 0) {
                return 0;
            } else if (n == 1) {
                return 1;
            } else {
                return series(n - 1) + series(n - 2);
            }
        }
        var n = +prompt('请输入求斐波那契数列第几项的值');
        while (n < 0) {
            n = +prompt('请重新输入一个大于等于0的整数：');
        }
        console.log('斐波那契数列第 ' + n + ' 项的值为：' + series(n));




        // 使用函数实现从小到大排序
        function sort() {
            for (var i = 0; i < arguments.length - 1; i++) {
                for (var j = 0; j < arguments.length - i - 1; j++) {
                    if (arguments[j] > arguments[j + 1]) {
                        var temp = arguments[j];
                        arguments[j] = arguments[j + 1];
                        arguments[j + 1] = temp;
                    }
                }
            }
            return arguments;
        }
        var arr = sort(1, 4, 2, 9, 8, 6, 5);
        console.log('从小到大排序为：');
        console.log(arr);


        // 函数求阶乘
        // var num = 10;
        // var sum = 0;
        // function getFactorial(n) {
        //     if (n == 1) {
        //         sum += n;
        //         return 1;
        //     }
        //     sum += n;
        //     return n * getFactorial(n - 1);
        // }
        // var product = getFactorial(num);
        // console.log(num + ' 的阶乘为：' + product + ' 函数的和为：' + sum);
        // 4
        // 4!+3!+2!+1!
        function getSum(num) {
            var sum = 0;
            for (var i = 1; i <= num; i++) {
                sum += getFactorial(i);
            }
            return sum;
        }

        function getFactorial(num) {
            var product = 1;
            for (var i = 2; i <= num; i++) {
                // product = product * i;
                product *= i;
            }
            return product;
        }
        var num = 4;
        console.log(getFactorial(num));
        console.log(getSum(num));



        // 判断是否是闰年
        // var num = +prompt('请输入查询年份');
        var flag = false;
        function isLeapYear(year) {
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            if (flag == true) {
                console.log(num + ' 年是闰年');
            } else {
                console.log(num + ' 年不是闰年');
            }
        }
        isLeapYear(num);



        // 函数计算圆的面积和周长
        // var num = +prompt('请输入圆的半径');
        var num = 4.321;//半径
        function count(x) {
            const PI = 3.14;
            var count = parseInt(2 * PI * x * 100) / 100;
            var area = parseInt(PI * x ** 2 * 100) / 100;
            console.log('半径 ' + num + ' 的周长为：' + count);
            console.log('半径 ' + num + ' 的面积为：' + area);
        }
        count(num);


        // 两个整数相互交换
        var num1 = 5;
        var num2 = 10;
        function exchange(a, b) {
            var temp;
            temp = a;
            a = b;
            b = temp;
            console.log(num1 + ' 与 ' + num2 + '交换后为' + a + '、' + b);
        }
        exchange(num1, num2)
        // function exchangeNum(...nums) {
        //     nums.reverse();
        //     console.log(nums);
        // }
        // exchangeNum(4, 5);



        // 点击为盒子添加边框样式
        var box = document.querySelector('.box-init');
        // var boxStyle = function () {
        //     box.className = 'box-init box';
        // }

        var changeBorder = function () {
            var boxClass = box.getAttribute('class');
            if (boxClass == 'box-init') {
                box.setAttribute('class', 'box-init box');
            } else {
                box.setAttribute('class', 'box-init');
            }
        }
        box.addEventListener('click', changeBorder);

    </script>
</body>

</html>